<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style type="text/css">
   .lrDiv{width:600px;height:500px;margin:0 auto;background-color:blue;}
   .tabHeader {list-style-type:none;margin-left:-42px;}
   .tabHeader li {text-align:center;float:left;width:80px;padding:5 40;background-color:#3fff3d;}
   .tabHeader li a {text-decoration:none;margin:padding:2 40;}
   .tabContent{height:480px;background-color:pink;clear:both;overflow:hidden;}
   .tab{height:480px;}
   .tabContent ul {list-style-type:none;}
   .tabContent ul li {margin-top:10px;}
   .loginCon{width:300px;margin:0 auto;margin-top:100px;}
   .loginBtn,.registerBtn{text-align:center;margin-right:40px;}
   .loginTab{display:none;}
   .registerTab{display:none;}
   .btn{width:100px;}
   .title{text-align:center;}
   .active{background-color:pink;}
   .tabActive{display:block;}
   .registerCon{width:300px;margin:0 auto;margin-top:100px;}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
	var user = {};
	
	user.loginInit = function(){
		   /**注册选项卡登录界面切换点击事件*/
		   $("#loginUI").click(function(){
			   $(this).addClass("active")
			   $("#registerUI").removeClass("active");
			   $(".registerTab").hide();
			   $(".loginTab").show();
		   });
		   
		   /**注册用户注册切换点击事件*/
		   $("#registerUI").click(function(){
			   $(this).addClass("active");
			   $("#loginUI").removeClass("active");
			   $(".loginTab").hide();
			   $(".registerTab").show();
		   });
		   
		   /**注册用户登录提交事件*/
		   $('#userLogin').bind('submit', function(){
		        user.ajaxSubmit(this, function(data){
		        	alert("成功");
		        },function(data){
		        	alert("错误");
		        });
		        return false;
		    });
		   
		   /**注册用户注册提交事件*/
		   $('#userRegister').bind('submit', function(){
		        user.ajaxSubmit(this, function(data){
		        	alert("成功");
		        },function(data){
		        	alert("错误");
		        });
		        return false;
		   });
   }

   /**ajax提交表单数据*/
   user.ajaxSubmit=function(frm,funSuc,funErr){   
	    var dataPara = user.getFormJson(frm);
	    $.ajax({
	        url: frm.action,
	        type: frm.method,
	        data: dataPara,
	        dataType:"json",
	        success:funSu,
	        error:funErr
	    });
	}
   
   /**收集表单的数据转换表单数据为json格式*/
   user.getFormJson=function(frm){
	    var o = {};
	    var a = $(frm).serializeArray();
	    $.each(a, function () {
	        if (o[this.name] !== undefined) {
	            if (!o[this.name].push) {
	                o[this.name] = [o[this.name]];
	            }
	            o[this.name].push(this.value || '');
	        } else {
	            o[this.name] = this.value || '';
	        }
	    });
	   return o;
	}
   
   $(function(){
      user.loginInit();
   });
</script>
</head>
<body>
   <div class="lrDiv">
   	   <ul class="tabHeader">
   	   	   <li><a href="javascript:void(0);" id="loginUI" class="active">用户登录</a></li>
   	   	   <li><a href="javascript:void(0);" id="registerUI">用户注册</a></li>
   	   </ul>
   	   <div class="tabContent">
   	     <form action="/user/login" method="post" id="userLogin">
   	       <div class="loginTab tabActive">
   	           <h3 class="title">用户登录</h3>
   	           <ul class="loginCon">
   	           	  <li>用户名:<input type="text" name="username"/></li>
   	           	  <li>密　码:<input type="password" name="password"/></li>
   	           	  <li class="loginBtn"><input type="submit" class="btn" value="登录"/></li>
   	           </ul>
   	  	   </div>
   	     </form>
   	     <form action="/user/register" method="post" id="userRegister">
	   	   <div class="registerTab">
	   	       <h3 class="title">用户注册</h3>
	   	       <ul class="registerCon">
	   	       	 <li>用户名:<input type="text" name="username"/></li>
	   	       	 <li>密　码:<input type="password" name="password"/></li>
	   	       	 <li class="registerBtn"><input type="submit" class="btn" value="注册"/></li>
	   	       </ul>
	   	   </div>
   	     </form>
   	   </div>
   </div>
</body>
</html>